<template>
  <div id="app">
    <!--导航栏-->
    <!-- <div class="menu">
      <top-menu></top-menu>
    </div> -->
    <!--主体内容部分-->
    <div class="main">
      <router-view v-if="ready"></router-view>
    </div>
    <div id="map" v-if="showMap">
      <div id="heatmap" v-show="false"></div>
    </div>
    <div id="description" v-if="descriptionVisible">
      <span>{{ description }}</span>
    </div>
  </div>
</template>
<script>
import topMenu from "./components/top-menu";
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
import * as API from "./http/API";

export default {
  name: "app",
  components: {
    topMenu,
  },
  data() {
    return {
      activeName: "first",
      ready: false, // 是否初始化完成
      description: "",
      descriptionVisible: "",
      biaoshi: require("./assets/imgs/navigation-log/biaoshi.png"),
      showMap: true,
    };
  },
  mounted() {
    this.initViewer();
    window.showMap = this.showMap;
  },
  methods: {
    initViewer() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2U0MWVhMi03YTBhLTQwZmItODIxYi02MDhhYWQ2OTc0NDUiLCJpZCI6NTg2MzAsImlhdCI6MTY1NzUzMDQ2NH0.-usYAlB_c0q9MlQ4523VhIhuQg8r6H_Fjo8IiseQe5c";
      // 挂载到全局
      window.viewer = new Cesium.Viewer("map", {
        timeline: false,
        animation: false,
        shouldAnimate: true,
        navigationHelpButton: false,
        sceneMode: Cesium.SceneMode.SCENE2D,
        fullscreenButton: false, //全屏按钮
        geocoder: false, //右上角查询搜索
        infoBox: false, //信息框
        skyBox: false, //天空盒子
        homeButton: false, //home按钮
        sceneModePicker: false, //3d 2d选择器
        selectionIndicator: false, //
        baseLayerPicker: false,
        creditContainer: document.createElement("div"),
        // mapMode2D: Cesium.MapMode2D.ROTATE, //地图是否重复排列
        /* imageryProvider: new Cesium.TileMapServiceImageryProvider({
                        url: "mapdata",
                        fileExtension: 'jpg',
                        tilingScheme: new Cesium.GeographicTilingScheme({
                            ellipsoid: Cesium.Ellipsoid.WGS84,
                        }),
                    }),*/
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: mapUrl, //发布到nginx上的URL，其中{z}代表级数、{x}代表列、{y}代表行
          key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MjJhNDc2MC04YmU4LTQ4OGQtOWE0ZS1lZjQ5MzRkNjllODQiLCJpZCI6NTg2MzAsImlhdCI6MTYyMzMxNDEyOH0.3bY9WUawl8Z_XEF5QDCxuoL_SxISu6zHfxy4Y7mpbS4",
        }),
      });
      this.ready = true;
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          120.53,
          14.67,
          610000000000000
        ),
      });
      viewer.scene.backgroundColor = Cesium.Color.WHITE;
      /* viewer.animation.container.style.visibility = 'hidden' // 不显示动画控件*/
      let scene = viewer.scene;
      scene.morphTo2D(0);
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.53, 19.67, 5000000),
      });
      // viewer.timeline.container.style.visibility = 'hidden' // 不显示时间轴控件
      /*    //单击显示text
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                let _self = this;
                handler.setInputAction(function (e) {
                    let currentTarget = viewer.scene.pick(e.position);
                    if (viewer.scene.pickPositionSupported && Cesium.defined(currentTarget)) {
                            if(currentTarget.id.attribute && currentTarget.id.attribute.text){
                                _self.description = currentTarget.id.attribute.text;
                                _self.descriptionVisible = true;
                                let element = document.getElementById('description');
                                //笛卡尔坐标转为屏幕坐标
                                // let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, e.position);
                                element.style.top = (e.position.y + 10) + 'px';
                                element.style.left = (e.position.x + 30) + 'px';
                        }
                    } else if (currentTarget && currentTarget.id._name == 'draw-target') { //是手动绘制的图标

                    } else {
                        _self.description = '';
                        _self.descriptionVisible = false;
                    }
                  ;
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);*/
      /*  //全局右击事件
                window.rightClickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)*/
    },
  },
};
</script>

<style lang="scss" >
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a2342;
  margin: 0;
}
.menu {
  position: absolute;
  top: 80px;
  width: auto;
  right: 20px;
  z-index: 999;
}
.main {
  position: absolute;
  height: 100%;
  width: 100%;
  * {
    z-index: 999;
  }
}

#map {
  width: 100%;
  height: 100%;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

#description {
  position: absolute;
  height: auto;
  max-height: 500px;
  width: 300px;
  padding: 5px;
  background: url("./assets/imgs/prompt_bounced_bg.png");
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.8rem;
  text-align: left;
  white-space: pre-wrap;
}
.close-description {
}
</style>
